<template>
  <div class="fenxiaoshangbaobiao">
    <div>
      <left></left>
      <div class="right">
        <div
          style="
            height: 91px;
            border-bottom: 1px solid rgb(227, 232, 241);
            width: 100%;
            padding: 0 30px;
          "
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/baobiao' }"
              >报表</el-breadcrumb-item
            >
            <el-breadcrumb-item>分销商报表</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div
          style="
            padding: 37px 30px 0 30px;
            height: calc(100vh - 91px);
            overflow: auto;
          "
        >
          <div>
            <div class="flexc">
              <div class="t_choose_tab_box">
                <div
                  @click="changestatus('0')"
                  :class="{ t_tab_title_lei: search.type == 0 }"
                  class="t_tab_title"
                >
                  按时间查看
                  <div
                    class="t_under_line"
                    :class="{ t_under_line_lei: search.type == 0 }"
                  ></div>
                </div>
                <div
                  @click="changestatus('1')"
                  :class="{ t_tab_title_lei: search.type == 1 }"
                  class="t_tab_title"
                  style="
                    margin-left: 40px;

                    position: relative;
                  "
                >
                  按商品查看
                  <div
                    class="t_under_line"
                    :class="{ t_under_line_lei: search.type == 1 }"
                  ></div>
                </div>

                <div
                  @click="changestatus('2')"
                  :class="{ t_tab_title_lei: search.type == 2 }"
                  class="t_tab_title"
                  style="
                    margin-left: 40px;

                    position: relative;
                  "
                >
                  按分销商查看
                  <div
                    class="t_under_line"
                    :class="{ t_under_line_lei: search.type == 2 }"
                  ></div>
                </div>

              </div>
            </div>

            <div
              style="
                background: rgb(255, 255, 255);
                border-radius: 20px;
                padding: 20px;
                margin-top: 21px;
              "
              class="flexb"
            >
              <div class="flex">
                <el-date-picker
                  style="width: 470px"
                  v-model="times"
                  @change="timechange"
                  :picker-options="pickerOptions"
                  :clearable="true"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  :default-time="['00:00:00', '23:59:59']"
                  range-separator="——"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
                <div>
                  <div style="margin-left: 30px">
                    <div>
                      <el-button type="primary" round @click="searchbtn"
                        >搜索</el-button
                      >
                      <el-button type="text" round @click="daochu" v-if="search.type == 2"
                        >导出明细</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <el-table :data="list" style="width: 100%">
            <el-table-column
              fixed
              width="180"
              v-if="search.type == '2'"
              align="center"
              prop="user_name"
              label="分销商"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip="true"
              v-if="search.type == '1'"
              width="250"
              align="center"
              prop="page_name"
              label="商品"
              fixed
            ></el-table-column>
            <el-table-column
              fixed
              width="180"
              v-if="search.type == '0'"
              align="center"
              prop="date"
              label="日期"
            ></el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="order_count"
              label="订单数"
            ></el-table-column>
            <el-table-column
              align="center"
              width="180"
              prop="success_count"
              label="审核通过"
            ></el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="bill_count"
              label="提单成功"
            ></el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="delivery_count"
              label="发货数"
            ></el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="delivery_rate"
              label="发货率(发货数/提单数)"
            >
              <template slot-scope="scope">
                {{ formatScore(scope.row.delivery_rate) }}
              </template>
            </el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="fail_count"
              label="生产失败数"
            ></el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="activate_count"
              label="激活数"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="activate_rate"
              label="激活率(激活数/发货数)"
              width="180"
            >
              <template slot-scope="scope">
                {{ formatScore(scope.row.activate_rate) }}
              </template>
            </el-table-column>
            <el-table-column
              width="180"
              align="center"
              prop="recharge_count"
              label="充值数"
            ></el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              prop="recharge_rate"
              label="充值率(充值数/激活数)"
              width="180"
            >
              <template slot-scope="scope">
                {{ formatScore(scope.row.recharge_rate) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right; padding: 20px"
            background
            layout="prev,pager,next,total,jumper"
            :current-page="search.page"
            @current-change="fanye"
            :page-size="search.page_Size"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import left from "../left.vue";
export default {
  name: "fenxiaoshangbaobiao",
  components: {
    left,
    top,
  },
  data() {
    return {
      list: [],
      search: {
        page: 1,
        page_Size: 20,
        type: "0",
        is_distributor: 1,
      },
      start_time: "",
      end_time: "",
      shoujiban: false,
      minDate: new Date(2023, 0, 1),
      selectDate: "",
      times: [],
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
    };
  },
  created() {},
  mounted() {
    this.getlist();
  },
  methods: {
    daochu:function(){
      axios.get("/own/form/export", { params: this.search }).then((response) => {
        if (response.data.msg.code == 0) {
          location.href = response.data.data
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getlist: function () {
      axios.get("/own/form/list", { params: this.search }).then((response) => {
        console.log("response11111", response);
        if (response.data.msg.code == 0) {
          this.list = response.data.data.data;
          this.total = response.data.data.total;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    // tab切换
    changestatus(val) {
      this.search.type = val;
      if (val == 0) {
        //按时间
        this.search.page = 1;
        this.getlist();
      }
      if (val == 1) {
        //按商品
        this.search.type = 1;
        this.search.page = 1;
        this.getlist();
      }
      if (val == 2) {
        //按商品
        this.search.type = 2;
        this.search.page = 1;
        this.getlist();
      }
    },
    // 翻页
    fanye: function (val) {
      this.search.page = val;
      this.getlist();
    },
    searchbtn() {
      if (this.search.start_time && this.search.end_time) {
        this.getlist();
      } else {
        delete this.search.start_time;
        delete this.search.end_time;
        this.getlist();
      }
    },
    formatScore(score) {
      return `${score}%`;
    },
    timechange: function (val) {
      if (this.times == null) {
        this.search.start_time = "";
        this.search.end_time = "";
      } else {
        this.search.start_time = this.times[0];
        this.search.end_time = this.times[1];
      }
    },
  },
};
</script>
<style scoped lang="less">
.fenxiaoshangbaobiao {
}
</style>
<style scoped>
.t_choose_tab_box {
  display: flex;
}
.t_under_line {
  width: 30px;
  height: 2px;
  background-color: #f6f8fb;
  margin-top: 10px;
}
.t_tab_title {
  color: rgb(152, 155, 161);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
}
.t_tab_title_lei {
  color: #005aff;
  font-weight: bold;
  font-size: 24px;
}
.t_under_line_lei {
  background-color: #005aff;
}
</style>
